<!-- 展示 》 多选字典 -->

<template>
  <el-form-item v-bind="formItem">
    <!-- 标签 -->
    <template v-if="formItem.label" #label>
      <slot name="label" :label="formItem.label">{{ formItem.label }}</slot>
    </template>

    <div :class="divClass">
      <EasyScroll :hasX="!multiRow">
        <slot v-if="hasPrefix" name="prefix">
          <span :class="`${className}-prefix`">{{ prefix }}</span>
        </slot>

        <slot :text="trans(model, backup)">{{ trans(model, backup) }}</slot>

        <slot v-if="hasSuffix" name="suffix">
          <span :class="`${className}-suffix`">{{ suffix }}</span>
        </slot>
      </EasyScroll>
    </div>
  </el-form-item>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import mixShow from '../mixShow'
import ShowText from '../ShowText'

const name = 'ShowDictMulti'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name,

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [mixShow],

  /**
   * 属性注册 (抽取以便查阅)
   */
  props: CORE.WEB[name],

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: [], // 内部绑定值
      backup: [], // 备用绑定值
      EMPTY: '', // 空值常量
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    ...ShowText.computed,

    /**
     * ID 为字符串的字典
     */
    strDict() {
      return this.dict.map(([id, ...other]) => [`${id}`, ...other])
    },
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 是否不等 (可覆盖)
     */
    isDiff() {
      const { obj, prop, bindList, isMulti, model, backup } = this

      // 判断 backup (有时要相等，无时要为空)
      if (isMulti) {
        const bindBackup = obj[bindList[1]]
        const bindBackupStr = CORE.isArray(bindBackup) ? bindBackup.join() : bindBackup
        if (backup.join() !== bindBackupStr) return true
      } else {
        if (!CORE.isEmpty(backup)) return true
      }

      // 判断 model (存在要相等，其他要为空)
      const value = obj[prop]
      const valueStr = CORE.isArray(value) ? value.join() : value
      return model.join() !== valueStr
    },

    /**
     * 设置内部绑定值 (可覆盖)
     */
    setModel() {
      const { obj, prop, bindList, isMulti } = this
      const value = obj[prop]
      const backup = isMulti ? obj[bindList[1]] : []

      const getList = (x) => CORE.isString(x) ? x.split(',') : CORE.isArray(x) ? x.map((item) => `${item}`) : []
      this.model = getList(value)
      this.backup = getList(backup)
    },

    /**
     * 转换方法
     */
    trans(value, backup) {
      const { strDict, or, empty } = this
      if (CORE.isEmpty(value)) return empty

      const list = CORE.isString(value) ? value.split(',') : CORE.isArray(value) ? value.map((item) => `${item}`) : []
      const backupList = CORE.isString(backup) ? backup.split(',') : CORE.isArray(backup) ? backup : []
      return list.map((item, i) => CORE.dict(strDict, item) || backupList[i] || empty).join(or)
    },
  },
}
</script>
